import React, { useState } from "react";
import { UnControlled as CodeMirror } from "react-codemirror2";
import "codemirror/lib/codemirror.css";
import "codemirror/mode/javascript/javascript";
import "codemirror/theme/material.css";

function CodeEditor() {
  const [code, setCode] = useState("<h1>Hello, World!</h1>");

  return (
    <div>
      <CodeMirror
        value={code}
        options={{
          mode: "javascript",
          theme: "material",
          lineNumbers: true,
        }}
        onChange={(editor, data, value) => {
          setCode(value);
        }}
      />
      <div dangerouslySetInnerHTML={{ __html: code }} />
    </div>
  );
}

export default CodeEditor;
